<template>
    <div class="tab-bar-item" @click="ItemClick()">
        <div v-if="!isactive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :class="{active: isactive}"><slot name="item-text"></slot></div>
    </div>
</template>

<script>
export default {
name:'TabBarItem',
props:{
    path:String,
    activecolor:{
        type:String,
        default:'red'
    }
},
data(){
    return{
        //isactive:true
    }
},
computed:{
isactive()
{
    return this.$route.path.indexOf(this.path) !== -1
},
activestyle()
{
    return this.isactive ? {color: this.activecolor} : {}
}
},
methods:{
    ItemClick(){
        this.$router.replace(this.path)
    }
}
}
</script>

<style scoped>
body{
    padding: 0;
    margin: 0;
}
.tab-bar-item{
  flex:1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img{
  width: 24px;
  height: 24px;
}
.active{
    color: red;
}
</style>